<template>
  <div class="mod-demo-echarts">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card>
          <div>
            <el-statistic
              group-separator=","
              :value="amountData.wxUserCount"
              title="微信用户数"
            >
              <template slot="suffix">
                <span class="like">
                  <i class="el-icon-s-custom" style="color: #67c23a"></i>
                </span>
              </template>
            </el-statistic>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div>
            <el-statistic
              group-separator=","
              :value="amountData.patientCount"
              title="患者总数"
            >
              <template slot="suffix">
                <span class="like">
                  <i class="el-icon-s-custom" style="color: #409eff"></i>
                </span>
              </template>
            </el-statistic>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div>
            <el-statistic
              group-separator=","
              :value="amountData.wxActive"
              title="微信周注册总数"
            >
              <template slot="suffix">
                <span class="like">
                  <i class="el-icon-star-on" style="color: red"></i>
                </span>
              </template>
            </el-statistic>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div>
            <el-statistic :value="amountData.patientAddition" title="患者周增长数">
              <template slot="suffix">
                <span class="like">
                  <i class="el-icon-s-promotion" style="color: red"></i>
                </span>
              </template>
            </el-statistic>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <div id="J_chartLineBox" class="chart-box"></div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card>
          <div id="J_chartBarBox" class="chart-box"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div id="J_chartPieBox" class="chart-box"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div id="J_chartScatterBox" class="chart-box"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getIllSubForWeek,
  getModuleForWeek,
  getMemberStatistic,
  getPatientStatistic,
  getAmountStatistic,
} from "@/api/common/index";
import * as echarts from "echarts";
export default {
  data() {
    return {
      like: true,
      amountData: {},
      chartLine: null,
      chartBar: null,
      chartPie: null,
      chartScatter: null,
      illSubSeries: [],
      moduleSeries: [],
      memberSeries: [],
      roleNames: [],
      patientSeries: [],
      doctorNames: [],
    };
  },
  mounted() {
    // 查询统计数
    this.initAmountStatistic();
    this.initChartLine();
    this.initChartBar();
    this.initChartPie();
    this.initChartScatter();
  },
  activated() {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartLine) {
      this.chartLine.resize();
    }
    if (this.chartBar) {
      this.chartBar.resize();
    }
    if (this.chartPie) {
      this.chartPie.resize();
    }
    if (this.chartScatter) {
      this.chartScatter.resize();
    }
  },
  methods: {
    // 统计总数
    initAmountStatistic() {
      getAmountStatistic().then((response) => {
        this.amountData = response.data;
      });
    },
    // 折线图
    async initChartLine() {
      const text = "本周病情录入统计";
      // 发送请求获取统计数据
      await getIllSubForWeek().then((response) => {
        this.illSubSeries = response.data;
      });
      var option = {
        backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
          {
            offset: 0,
            color: "#f7f8fa",
          },
          {
            offset: 1,
            color: "#cdd0d5",
          },
        ]),
        title: {
          text: text,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["KOA0级", "KOA1级", "KOA2级", "KOA3级", "KOA4级"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          name: "KOA等级",
          type: "value",
        },
        series: this.illSubSeries,
      };
      this.chartLine = echarts.init(document.getElementById("J_chartLineBox"));
      this.chartLine.setOption(option);
      window.addEventListener("resize", () => {
        this.chartLine.resize();
      });
    },
    // 柱状图
    async initChartBar() {
      const text = "本周模块使用统计";
      await getModuleForWeek().then((response) => {
        this.moduleSeries = response.data;
      });
      var option = {
        backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
          {
            offset: 0,
            color: "#f7f8fa",
          },
          {
            offset: 1,
            color: "#cdd0d5",
          },
        ]),
        title: {
          text: text,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        toolbox: {
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: [
            "复诊提醒",
            "用药提醒",
            "患者信息",
            "专科查体",
            "信息发布",
            "随访信息",
            "科普信息",
            "用药建议",
            "健康指导",
          ],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          },
        ],
        yAxis: [
          {
            name: "使用次数",
            type: "value",
          },
        ],
        series: [
          {
            name: "复诊提醒",
            type: "bar",
            data: this.moduleSeries[0],
          },
          {
            name: "用药提醒",
            type: "bar",
            data: this.moduleSeries[1],
          },
          {
            name: "患者信息",
            type: "bar",
            stack: "患者管理",
            data: this.moduleSeries[2],
          },
          {
            name: "专科查体",
            type: "bar",
            stack: "患者管理",
            data: this.moduleSeries[3],
          },
          {
            name: "信息发布",
            type: "bar",
            data: this.moduleSeries[4],
            markLine: {
              lineStyle: {
                normal: {
                  type: "dashed",
                },
              },
              data: [[{ type: "min" }, { type: "max" }]],
            },
          },
          {
            name: "随访信息",
            type: "bar",
            barWidth: 5,
            stack: "信息发布",
            data: this.moduleSeries[5],
          },
          {
            name: "科普信息",
            type: "bar",
            stack: "信息发布",
            data: this.moduleSeries[6],
          },
          {
            name: "用药建议",
            type: "bar",
            stack: "信息发布",
            data: this.moduleSeries[7],
          },
          {
            name: "健康指导",
            type: "bar",
            stack: "信息发布",
            data: this.moduleSeries[8],
          },
        ],
      };
      this.chartBar = echarts.init(document.getElementById("J_chartBarBox"));
      this.chartBar.setOption(option);
      window.addEventListener("resize", () => {
        this.chartBar.resize();
      });
    },
    // 饼状图
    async initChartPie() {
      const text = "系统成员统计";
      await getMemberStatistic().then((response) => {
        this.memberSeries = response.data.memberStatistics;
        this.roleNames = response.data.names;
      });
      var option = {
        backgroundColor: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.05,
              color: "#eee",
            },
            {
              offset: 0.95,
              color: "#eeeeb0",
            },
          ],
        },
        title: {
          text: text,
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          left: "center",
          top: "bottom",
          data: this.roleNames,
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "成员类型",
            type: "pie",
            radius: [20, 140],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 5,
            },
            data: this.memberSeries,
          },
        ],
      };
      this.chartPie = echarts.init(document.getElementById("J_chartPieBox"));
      this.chartPie.setOption(option);
      window.addEventListener("resize", () => {
        this.chartPie.resize();
      });
    },
    // 散点图
    async initChartScatter() {
      const text = "医患数量统计";
      const subtest = "医生所属病人数量统计";
      await getPatientStatistic().then((response) => {
        this.patientSeries = response.data.dataStatistics;
        this.patientNames = response.data.nameStatistics;
      });
      var option = {
        backgroundColor: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.05,
              color: "#eee",
            },
            {
              offset: 0.95,
              color: "#eeeeb0",
            },
          ],
        },
        toolbox: {
          show: true,
          feature: {
            restore: { show: true },
          },
        },
        title: {
          text: text,
          subtext: subtest,
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 10,
          top: 20,
          bottom: 20,
          data: this.patientNames,
        },
        series: [
          {
            name: "姓名",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: this.patientSeries,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      this.chartPie = echarts.init(document.getElementById("J_chartScatterBox"));
      this.chartPie.setOption(option);
      window.addEventListener("resize", () => {
        this.chartPie.resize();
      });
    },
  },
};
</script>

<style lang="scss">
.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}
.mod-demo-echarts {
  > .el-alert {
    margin-bottom: 10px;
  }
  > .el-row {
    margin-top: -10px;
    margin-bottom: -10px;
    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
  .chart-box {
    min-height: 400px;
  }
}
</style>
